<template>
  <el-card shadow="never">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <el-form :inline="true" :model="searchModel" size="small">
        <el-form-item label="资产ID">
          <el-input v-model="searchModel.number" placeholder="资产ID"></el-input>
        </el-form-item>
        <el-form-item label="合同号">
          <el-input v-model="searchModel.contractNamber" placeholder="合同号"></el-input>
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="searchModel.name" placeholder="资产名称"></el-input>
        </el-form-item>
        <template v-if="toggleSearchStatus">
          <el-form-item label="批次">
            <el-input v-model="searchModel.batch" placeholder="批次"></el-input>
          </el-form-item>
          <el-form-item label="入库时间">
            <el-col class="dateCol" :span="11">
              <el-date-picker type="date" placeholder="开始时间" v-model="searchModel.inDate_begin" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col align="center" class="line" :span="1">~</el-col>
            <el-col class="dateCol" :span="11">
              <el-date-picker type="date" placeholder="结束时间" v-model="searchModel.inDate_end" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="分类编码">
            <el-input v-model="searchModel.code" placeholder="分类编码"></el-input>
          </el-form-item>

          <el-form-item label="资产大类">
            <el-select v-model="searchModel.classes" placeholder="请选择">
              <el-option key="1" label="土地" :value="1"></el-option>
              <el-option key="2" label="房屋及构筑物" :value="2"></el-option>
              <el-option key="3" label="通用设备" :value="3"></el-option>
              <el-option key="4" label="车辆" :value="4"></el-option>
              <el-option key="5" label="专用设备" :value="5"></el-option>
              <el-option key="6" label="文物及陈列品" :value="6"></el-option>
              <el-option key="7" label="图书档案" :value="7"></el-option>
              <el-option key="8" label="家具用具及装具" :value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="searchModel.typeName" placeholder="分类名称"></el-input>
          </el-form-item>
          <el-form-item label="购买单位">
            <el-input v-model="searchModel.buyer" placeholder="购买单位"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
                  <span style="float: left;overflow: hidden;" class="">
                      <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                      <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置
                      </el-button>

                      <el-button @click="handleToggleSearch()" type="text" size="small">
                          {{ toggleSearchStatus ? '收起' : '展开' }}
                          <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                      </el-button>


                  </span>
        </el-form-item>
      </el-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <el-upload ref="upload"
                 :action="importExcelUrl"
                 :on-change="handleImportExcel"
                 :headers="tokenHeader"
                 :show-file-list = "false" >
        <el-button slot="trigger" size="small" type="primary">导入</el-button>
      </el-upload>
    </div>

    <!-- 资产列表 -->
    <div class="project">
      <el-table
        border
        size="small"
        :data="dataSource"
        style="width: 100%"
        @row-click="rowClick"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column fixed align="center" label="#"  width="55">
          <template slot-scope="scope">
            <el-radio v-model="singleSelRowKey" :label="scope.row.id">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="number"  fixed width="170" label="资产ID"></el-table-column>
        <el-table-column prop="name" fixed width="150" label="资产名称" sortable></el-table-column>
        <el-table-column prop="contractNamber"   width="150" label="合同号"></el-table-column>
        <el-table-column prop="batch" width="120" label="批次" sortable></el-table-column>
        <el-table-column prop="companyName" width="180" label="领用公司" sortable></el-table-column>
        <el-table-column prop="inDate" width="120" label="入库日期" sortable></el-table-column>
        <el-table-column prop="price" width="120" label="单价（元）" sortable></el-table-column>
        <el-table-column width="300" label="规格型号" sortable>
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.model"  effect="light">
              <span> {{scope.row.model}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="name" label="资产名称" sortable></el-table-column>
        <el-table-column width="110" prop="code" label="分类编码" sortable></el-table-column>
        <el-table-column width="120" label="资产大类" sortable>
          <template slot-scope="scope">
            {{ ['土地','房屋及构筑物','通用设备','车辆','专用设备','文物及陈列品','图书档案','家具用具及装具'][scope.row.classes-1] }}
          </template>
        </el-table-column>
        <el-table-column width="150" prop="typeName" label="分类名称" sortable></el-table-column>
<!--        <el-table-column width="150" prop="depreciationMonth" label="资产折旧总月数" sortable></el-table-column>-->
        <el-table-column prop="buyer" width="180" label="购买单位" sortable></el-table-column>
        <el-table-column label="使用状态">
          <template slot-scope="scope">
            {{ ['正常','损坏'][scope.row.useState-1] }}
          </template>
        </el-table-column>
        <el-table-column prop="usefulLife" width="120" label="使用期限" sortable></el-table-column>
        <el-table-column label="资产状态">
          <template slot-scope="scope">
            {{ ['闲置','已领用','已处置'][scope.row.state-1] }}
          </template>
        </el-table-column>
        <el-table-column fixed="right"  label="操作">
          <template slot-scope="scope">
            <el-button @click="handleDetail(scope.row)" type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="ipagination.total" :page.sync="ipagination.current" :limit.sync="ipagination.pageSize"
                  @pagination="loadData"></pagination>
      <asset-view-modal ref="modalForm"></asset-view-modal>
    </div>
    <el-tabs value="first">
      <el-tab-pane label="领取记录" name="first">
        <receive-record ref="receiveForm"></receive-record>
      </el-tab-pane>
      <el-tab-pane label="归还记录" name="second">
        <return-record ref="returnForm"></return-record>
      </el-tab-pane>
      <el-tab-pane label="维修记录" name="third">
        <repair-record ref="repairForm"></repair-record>
      </el-tab-pane>
      <el-tab-pane label="处置记录" name="fourth">
        <dis-record ref="disposeForm"></dis-record>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
  import { SingleTableMixins } from '@/mixins/SingleTableMixins'
  import Pagination from '@/components/Pagination'
  import AssetViewModal from '../../assetBusiness/modules/AssetViewModal'
  import receiveRecord from './receiveRecord'
  import returnRecord from './returnRecord'
  import repairRecord from './repairRecord'
  import disRecord from './disRecord'




  export default {
    name: 'accountInquiry',
    mixins: [ SingleTableMixins ],
    components: {AssetViewModal, Pagination, receiveRecord, returnRecord, repairRecord, disRecord},
    data() {
      return {
        ipagination:{
          pageSize: 10,
          current:1,
          total: 0,
        },
        url:{
          list: "/asset/list",
          importExcelUrl:"/asset/importExcel"
        },
        // 表单数据选择
        multipleSelection: [],
      }
    },
    computed:{
      importExcelUrl () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      rowClick(row, column, event){
        this.singleSelRowKey = row.id;
        this.singleSelRows = row;
      },
      selectChange(e){
        this.$refs.receiveForm.getDataByMain(this.singleSelRowKey);
        this.$refs.returnForm.getDataByMain(this.singleSelRowKey);
        this.$refs.repairForm.getDataByMain(this.singleSelRowKey);
        this.$refs.disposeForm.getDataByMain(this.singleSelRowKey);

      },
    }
  }
</script>

<style scoped>
  >>> .cell{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .addBtn{
    float: left;
    margin-bottom: 15px;
  }
  .el-table{
    border-radius: 7px;
  }
</style>
